<template>
  <div class="home">
    <div style="height:56px"></div>
    <div class="section header" id="header">
      <div class="center flex_row flex_center">
        <!-- logo -->
        <Icon type="logo-octocat" size="32" style=""/>
        <!-- 菜单 -->
        <div class="menu flex_row flex_center">
          <div class="menu_item">首页</div>
          <div class="menu_item">关于</div>
        </div>

        <!-- 搜索 -->
        <Input suffix="ios-search" placeholder="搜索文章" @on-enter="search" v-model="keywords" class="search" clearable/>

        <!-- 头像 -->
        <Avatar icon="ios-person" class="avatar" />
      </div>
    </div>

    <!-- 主视图 -->
    <router-view></router-view>
  </div>
</template>

<script>
// @ is an alias to /sr
import { mixin } from "@/utils/mixin";
export default {
  mixins: [mixin],
  name: "home",
  data(){
    return{
        keywords:''
    }
  },
  methods:{
    search(){
      this.$bus.$emit('search',this.keywords);

    }
  }
 
};
</script>

<style lang="less" scoped>
.header {
  border: 1px solid #f5f5f5;
}
.search {
  width: 180px;
  margin-left: auto;
  margin-right: 20px;
}
.menu {
  margin-left: 20px;
  .menu_item {
    margin-right: 30px;
    font-size: 15px;
    color: #666;
    cursor: pointer;
    &:hover{
      color: #3963bc
    }
  }
}



</style>